<template>
    <div id="app">
        <mt-header title="产品中心">
            <router-link to="/" slot="left">
                <mt-button icon="back">返回</mt-button>
            </router-link>
            <mt-button icon="more" slot="right"></mt-button>
        </mt-header>
        <main>
            <article>
                <header>
                    <div class="top-con ">
                        <h2>因为专业，所以专注</h2>
                        <p>深入行业满足企业互联网转型需求</p>
                    </div>
                    <img src="http://s.300.cn/v2.0/mobile/images/product/protal/anli.jpg?201801021125" alt="" data-bd-imgshare-binded="1">
                </header>
                <div class="caseIndex-select">
                    <select v-model="selected" id="indu_select" @change="selectchange()">
                <option v-for="option in options" v-bind:value="option.value" :key="option">
                    {{ option.text }}
                </option>
                </select>
                </div>
                <section class="case-default-body">
                    <div class="case-list case-enjoy">
                        <ul class="clearfix" id="case-list">
                            <li v-for="item in this.GoodsDatalist" :key="item">
                                <div class="img">
                                    <img :src="'http://222.77.181.149:8078'+item.goodsPicture.fullPath" class="center-block img-responsive" v-if="item.goodsPicture!=null">
                                    <img src="../../img/aa.png" v-else>
                                </div>
                                <p class="case-name">{{item.title}}</p>
                                <p class="case-trade" data-href="/case/category/indu/29.html">行业：家具建材/百货</p>
                            </li>
                        </ul>
                    </div>
                </section>
            </article>
            <section class="none_data" v-show="nonedata">
                <img src="../../img/none.png"> 
                <p>暂无该类产品信息</p>
            </section>
        </main>
    </div>
</template>

<script type="text/ecmascript-6">
    import axios from 'axios';
    import {
        getApiByGoodsData
    } from '../../api/api';
    import {
        Header
    } from 'mint-ui';
    export default {
        components: {
            "mt-header": Header,
        },
        data() {
            return {
                GoodsDatalist: [],
                selected: '1',
                options: [{
                        text: '一类产品',
                        value: '1'
                    },
                    {
                        text: '二类产品',
                        value: '2'
                    },
                ],
                nonedata:false
            };
        },
        //方法
        methods: {
            //产品中心
            GoodsData() {
                let options = {
                    params: {
                        goodsType: this.selected,
                        currentPage: 1,
                        pageSize: 40,
                    }
                }
                getApiByGoodsData(options).then((res) => {
                    if (res.success === true) {
                        this.GoodsDatalist = res.data.data;
                        if( this.GoodsDatalist==''){
                           this.nonedata=true
                        }
                        else{
                             this.nonedata=false
                        }
                    }
                })
            },
            selectchange() {
                this.GoodsData()
            }
        },
        created() {
            this.GoodsData()
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style lang="scss" scoped>
    .mint-header {
        background: #262626
    }
    
    article header {
        background: none;
        height: auto;
        position: relative;
    }
    
    article header .top-con {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
        padding: 1px 0;
        text-align: center;
        width: 100%;
    }
    
    .top-con h2 {
        color: #fff;
        margin-top: 80px;
    }
    
    .top-con p {
        color: #fff;
        font-size: 0.95rem;
    }
    
    .caseIndex-select {
        width: 60%;
        margin: 4vw auto 2vw;
    }
    
    .caseIndex-select select {
        display: inline-block;
        width: 100%;
        height: 8vw;
        line-height: 8vw;
        border: 1px solid #ccc;
        font-size: 3.6vw;
        color: #555;
    }
    
    .case-enjoy ul {
        padding: 0px 2%;
    }
    
    .case-enjoy ul li {
        width: 50%;
        padding: 8px 9px;
        box-sizing: border-box;
    }
    
    .case-list ul li {
        float: left;
        background-color: #fff;
        margin-bottom: 10px;
        list-style-type: none;
    }
    
    .case-enjoy ul li:nth-child(2n+1) {
        float: left;
    }
    
    .case-list ul li .img {
        overflow: hidden;
        height: 105px;
    }
    
    .case-enjoy ul li .case-name {
        width: 100%;
        color: #333;
        font-size: 22px;
        padding: 12px 0 6px;
        box-sizing: border-box;
        -ms-text-overflow: ellipsis;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        margin: 0;
    }
    
    .case-enjoy ul li .case-name {
        width: 100%;
        color: #333;
        font-size: 1rem;
        padding: 12px 0 6px;
        box-sizing: border-box;
        -ms-text-overflow: ellipsis;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        margin: 0;
    }
    
    .case-enjoy ul li .case-trade {
        color: #999;
        font-size: 0.9rem;
        -ms-text-overflow: ellipsis;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        margin: 0;
    }
    .none_data{
        width: 40%;
        margin: 20% auto 0%;
        text-align: -webkit-center;
        text-align: center;
        img{
            width:60%;
            margin: auto
        }
        p{
            font-size: 1rem;
            color: #ccc;
        }
    }
</style>
